import { getCategoryList } from '@/services/api';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button, Tag } from 'antd';
import { isEqual } from 'lodash';
import React, { useRef, useState } from 'react';
import AddCatrgoryDrawer from '../Drawer/AddCatrgoryDrawer';

/* 商品類別列表 */
const CatrgoryList: React.FC<unknown> = () => {
  const actionRef = useRef<ActionType>();

  const [addCatrgoryParams, setAddCatrgoryParams] = useState({
    open: false,
    oid: '',
    title: '',
  });

  const columns: any = [
    {
      title: '商品類別 oid',
      key: 'oid',
      dataIndex: 'oid',
      hideInSearch: true,
    },
    {
      title: '商品類別名稱',
      dataIndex: 'name',
      hideInSearch: true,
      key: 'name',
    },
    {
      title: '商品類別中有多少商品',
      dataIndex: 'qty',
      hideInSearch: true,
      key: 'qty',
    },
    {
      title: '是否勾選手機銷售',
      dataIndex: 'mobile',
      hideInSearch: true,
      key: 'mobile',
      render: (_dom: any, _entity: any) => {
        return _entity?.mobile === 'true' ? (
          <Tag color="success">是</Tag>
        ) : (
          <Tag color="error">否</Tag>
        );
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text: any, record: any) => [
        <a
          key="editable"
          onClick={() => {
            setAddCatrgoryParams({
              open: true,
              title: `編輯分類-${record?.name}`,
              oid: record?.oid,
            });
          }}
        >
          編輯
        </a>,
      ],
    },
  ];

  return (
    <>
      <ProTable
        columns={columns}
        cardProps={{
          bodyStyle: {
            padding: 12,
          },
        }}
        actionRef={actionRef}
        bordered
        request={async () => {
          const { Items = [] } = await getCategoryList();

          return {
            data: Items || [],
            success: true,
            total: Items?.length ?? 0,
          };
        }}
        rowKey="oid"
        search={false}
        pagination={{
          defaultPageSize: 50,
        }}
        dateFormatter="string"
        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              setAddCatrgoryParams({
                open: true,
                oid: '',
                title: '新增商品類別',
              });
            }}
            type="primary"
          >
            新增商品類別
          </Button>,
        ]}
      />
      {addCatrgoryParams.open && (
        <AddCatrgoryDrawer
          {...addCatrgoryParams}
          onClose={() => {
            setAddCatrgoryParams({ open: false, oid: '', title: '' });
          }}
          onFinish={() => {
            setAddCatrgoryParams({ open: false, oid: '', title: '' });
            actionRef.current?.reload();
          }}
        />
      )}
    </>
  );
};

export default React.memo(CatrgoryList, (prev, next) => isEqual(prev, next));
